<template>
   <div>
       <button class="naviBox" v-for="(item,index) in naviData" :key="index" @click="SETNAVIINDEX(item.index)"> 
         <div class="naviOne flex" :class="NaviIndex == item.index ? 'active' : null ">
                <font-awesome-icon :icon="item.icon" class="icon"/>
                {{item.label}}
                </div>
         </button>
    </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
  export default 
  {
     name :'', 
     computed:{
        ...mapState('Search',['NaviIndex','keyword'])
     },
     mounted() {
        this.$bus.$on('SearchDetail',()=>{  
            this.init()
        })
     },
     methods: {
        ...mapActions('Search',['getSearchResultDetail']),
        ...mapMutations('Search',['SETNAVIINDEX']),
        async init(){
             let navi = this.naviData.find(item => item.index == this.NaviIndex)
             let api = navi?.api || '/api/search/article'
             let order =  navi?.classify?.find(item => item.index ==  navi?.ClassifyIndex)?.value || null
             let pageSize = navi?.pageSize || 10
             let res = await this.getSearchResultDetail({api,keyword:this.keyword,order,pageSize})
 
             if(res.code != 200) this.$message.error(res)
             
            
        }
     },
     watch:{
        NaviIndex:{
            immediate:true,
            handler(){
                this.init()
            }
        }
     },
     data() {
        return {
            naviData:[
                {index:1,label:'文章',icon:'file-lines',api:'/api/search/article',ClassifyIndex:1,pageSize:10,
                  classify:[
                         {label:'默认',value:'id',index:1}
                  ]},
                {index:2,label:'用户',icon:'user',api:'/api/search/user',ClassifyIndex:1,pageSize:20,
                  classify:[
                         {label:'默认',value:'uid',index:1}
                  ]
                },
            ]
        }
     },
  }
</script>
<style scoped lang='less'>
 /* 平板或手机 */
 @media screen and (max-width: 1000px){

   button.naviBox{
      margin: 0;
      width: auto;
      height: 100%;
      padding: 0;
      margin-left: 5px;
   }
    div.naviOne{
        width: auto;
       
     }

 
 }

.naviBox{
    margin: 5px 0;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}
.naviOne{
    width: 100%;
    height: 50px;
    border-radius: 5px;
    padding: 0 10px;
    box-sizing: border-box;
    border-left: 5px solid transparent;
    flex-wrap: nowrap;
    font-size: 18px;

    .icon{
        margin-right: 5px;
    }


}
.active,.naviOne:hover{
    background: var(--GeneralBackColor-half);
    border-left-color: var(--GeneralBackColor);
}
</style>